<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>

<title>美图随心看</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style>
 
.jf-list .jf-day{ display:block;text:center;  float:left ;  width:100px;  padding:14px;} 
.jf-list .jf-day>a{  }

a:link,a:visited,a:active{ color: black; }
a:hover{ color: red;}

</style>
<!--  -->
	<!--[if lt IE 9]>
	<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
	<![endif]-->
	<!--[if gte IE 9]><!-->
	<script src="${ctx}/js/jquery-2.0.3.min.js"></script>
	<!--<![endif]-->

<script type="text/javascript" src="${ctx}/layer/layer.js"></script>
<script type='text/javascript'>
var interval=2000, 
jsfilelist='${jsfilelist}', 
myChart ,data = ['0','0','0','0','0'] ;
data=data.concat(data,data,data,data,data,data); 

	$(document).ready(function() {
		$("div.jf-list").html("");
	 	$.each( (new Function("","return "+jsfilelist))() ,function(i, e){
	 		 setTimeout(function(){
	 		 		$("div.jf-list").append( "<div class='jf-day'><a href='#'  data-jf='"+e+"'>"+e+" </a></div>"  );
	 		 },100*(i+1));
	 		 
	 	});
		
		var get_js=function(day,callback){
			var js="${ctx}/watch/"+day+".js" ;
			$.ajaxSetup({  cache: true  }); 
			jQuery.getScript( js ) 
			     .done(function(script, textStatus) { $.ajaxSetup({  cache: false  });  callback.call();  })
				 .fail(function( data, textStatus, jqxhr ) { alert(js+"不存在!");  });
		};
		
		$("div.jf-list").on("mouseover","div.jf-day",function(){ $(this).css({"background-color":"yellow"}) }) 
						.on("mouseout","div.jf-day",function(){ $(this).css({"background-color":""}) })  
			.on("click","div.jf-day>a",function(){
				var dt=$(this).data("jf");
				get_js(dt,function(){
					  var dd=(new Function("","return day"+dt))();
					  var get_show=function(isshow){ return isshow=="true"?"显示":"不" ; };
					  var sum=0;
					  $(".text").html("<h2>"+dt+"</h2>");
						$(dd).each(function(i,e){
							var html="<div ><span style='padding:12px;'>"+e.website+"</span><span style='padding:12px;'>"+get_show(e.show)+"</span><span style='padding:12px;'>"+e.count+"</span></div>";
							$(".text").append(html);
							sum+=e.count;
						}) 
						$(".text").append("<div style='color:black;'><b>合计"+sum+"</b></div>");
				});
		});
		var clickOne = function(){
			$("a","div.jf-day").first().click();	
		};			
		 setTimeout(function(){
	         	clickOne();
		 },1000);

	});
//-->
</script>

<script type='text/javascript'> 
	$(document).ready(function( ) {
		
		var truncate_data=function( ){
			var l=$("div.data","div.pool").find("span").length;
			if(l>data.length) $("div.data","div.pool").find("span:eq(0)").fadeOut().remove();
		} ;
		
		var update_data=function( ){
			$.get("${ctx}/pool",{},function(dt){			
				var e=$("<span>").text(dt.size+", ") ;
				$("div.data","div.pool").append(e);	
				update_echarts( dt.size );
			});
		} ;
		
		setInterval(function(){
				truncate_data(); 
				update_data( ); 
			},interval);
	});
</script>
<!--  -->
</head>
<body>
	<div style='margin: 24px;'>
		
	
	<table width="80%" cellpadding="0" cellspacing="0" border="0" align="">
		<tr>
			<td  align="left"><h1>抓取情况统计: </h1></td>
			<td  align="right"><h1><a href="${ctx}">美图随心看</a></a></h1></td>
		</tr>
	</table>
	
		<table width="100%" cellpadding="0" cellspacing="0" border="0"
			align="center">
			<tr>
				<td width="60%" valign="top"><div class='jf-list' style='text-align: center;'>
						<h1 style='color:red'>正在加载..</h1>
				</div></td>
				<td valign="top"><div style="TEXT-ALIGN: left; border-left:0px solid;" class='text'>&nbsp;<a href="${ctx}"></a></a></div></td>
			</tr>
		</table>
	</div>
	
	<hr>
	
	<div style='margin: 24px;' class='pool'>
		<h1>缓存: </h1>
		 <div class='data'> </div> 	
		 <hr>	
		 <div id="main" style="height:400px"></div>
	</div>

</body>
<!--
http://echarts.baidu.com/echarts2/doc/example/dynamicLineBar.html
 -->
<script src="${ctx}/echarts/dist/echarts.js" ></script>
<script type="text/javascript"> 
	var option = {  
	    title : { text: '实时缓存数据'    }, 
	    legend: {  data:['缓存数据量'] },
	    tooltip : { trigger: 'axis'    },
	    toolbox: { show : true, feature : {   /* restore : {show: true}, */  saveAsImage : {show: true} } },
	    yAxis : [ {  type : 'value' , name : '数据量' } ],
	    xAxis : [  {name : '时间线',
	            type : 'category',  boundaryGap : true,
	            data : (function (){
	                var res = [];
	                var now = new Date();
	                var len = data.length;
	                while (len--) {
	                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
	                    now = new Date(now - interval);
	                }
	                return res;
	            })()
	    }  ], 
	    series : [ { 
	            name:'缓存数据量',
	            type:'line',
	            data : data
			} ]
	};
               
	 require.config({ paths: { echarts: '${ctx}/echarts/dist'  } });      
   require( [
   			'echarts',
        'echarts/chart/line' 
    ] , function (ec) {
			  myChart = ec.init( document.getElementById('main') );  				
				myChart.setOption(option);    //载入图表
			}
		);  
		
		var axisData;
		var update_echarts =function(val){ 
		      axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
				 	myChart.addData([
			        [
			            0,  // 系列索引 
			            val ,
			            true,     // 新增数据是否从队列头部插入
			            false ,     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头			         
			            axisData
			    ]]);   
		} ; 

</script>
    
</html>
